<!--实测实量点位详情页面（移植中建app源码）-->
<template>
  <div class="view">
    <div class="content">
      <a-spin :spinning="loading">
        <div>
          <h5 class="title">{{ form.name }}</h5>
          <div style="font-size: 1.5rem; line-height: 2.8rem">点位描述：{{ form.pointDescribe || '无' }}</div>
          <div v-for="(item, index) in form.checkItems" :key="index">
            <!-- 标准偏差判定/ 设计标准值判定 -->
            <div v-if="item.judgmentType.code === '0' || item.judgmentType.code === '1'">
              <div class="info-item">
                <div class="item-title">
                  <span class="required">检查项：{{ item.checkName }}</span>
                  <div v-if="$isEmpty(item.judgmentType.qualified)" class="status color1 required">未测量</div>
                  <template v-else>
                    <span v-if="!item.judgmentType.qualified && item.judgmentType.status" class="status color1 required"
                      >不合格</span
                    >
                    <span v-if="item.judgmentType.qualified && item.judgmentType.status" class="status color2 required"
                      >合格</span
                    >
                  </template>
                </div>
                <div v-if="!$isEmpty(item.judgmentType.qualified)" class="fielditem">
                  <div class="filedTitle">
                    <span style="color: red; font-weight: normal; vertical-align: middle">*</span>
                    <span>测量值({{ item.unit }})：</span>
                  </div>
                  <div class="filedValue">
                    <BaseInput
                      placeholder="未填写"
                      v-for="(items, i) in item.judgmentType.value"
                      :key="i"
                      v-model="items.name"
                      :disabled="type == 'view'"
                      @blur="changeStandardValue(item)"
                    />
                  </div>
                </div>
                <div style="display: flex; justify-content: space-around; margin: 5px 0 15px; color: #ccc">
                  <div>
                    {{ item.judgmentType.name }}：{{
                      item.judgmentType.code === '0' ? item.standardVal : item.designVal
                    }}
                  </div>
                  <div>最小偏差值：{{ item.negativeVal }}</div>
                  <div>最大偏差值：{{ item.positiveVal }}</div>
                </div>
                <div style="font-size: 14px; color: #018fe0; padding-left: 10px">
                  <span @click="dialogExplain(item, index)">查看测量说明</span>
                </div>
              </div>
            </div>
            <!-- 逻辑值判定 -->
            <div v-else-if="item.judgmentType.code == '2'">
              <div class="info-item">
                <div class="item-title">
                  <span>检查项：{{ item.checkName }}</span>
                </div>
                <!-- <div v-if="$isEmpty(item.judgmentType.qualified)" class="status color1 required">未测量</div> -->
                  <!-- v-else -->
                <a-radio-group
                  :disabled="type == 'view'"
                  v-model="item.judgmentType.qualified"
                  direction="horizontal"
                >
                  <a-radio checked-color="#07c160" value="1">合格</a-radio>
                  <a-radio checked-color="#07c160" value="2">不合格</a-radio>
                </a-radio-group>
                <div style="font-size: 14px; color: #018fe0; margin-top: 1rem; padding-left: 10px">
                  <span @click="dialogExplain(item, index)">查看测量说明</span>
                </div>
              </div>
            </div>
            <!-- 差值判定 -->
            <div v-else-if="item.judgmentType.code == '3'">
              <div class="info-item">
                <div class="item-title">
                  <span class="required">检查项：{{ item.checkName }}</span>
                  <div v-if="$isEmpty(item.judgmentType.qualified)" class="status color1 required">未测量</div>
                  <template v-else>
                    <span v-if="!item.judgmentType.qualified && item.judgmentType.status" class="status color1 required"
                      >不合格</span
                    >
                    <span v-if="item.judgmentType.qualified && item.judgmentType.status" class="status color2 required"
                      >合格</span
                    >
                  </template>
                </div>
                <div v-if="!$isEmpty(item.judgmentType.qualified)" class="fielditem">
                  <div class="filedTitle">
                    <span style="color: red; font-weight: normal; vertical-align: middle">*</span>
                    <span>测量值({{ item.unit }})：</span>
                  </div>
                  <div class="filedValue">
                    <BaseInput
                      placeholder="未填写"
                      v-for="(items, i) in item.judgmentType.value"
                      :key="i"
                      v-model="items.name"
                      :disabled="type == 'view'"
                      @blur="changeDifferenceValue(items, item)"
                    />
                  </div>
                </div>
                <div style="display: flex; justify-content: space-around; margin: 5px 0 15px; color: #ccc">
                  <!--<div>标准值：{{item.standardVal}}</div>-->
                  <div>{{ item.judgmentType.name }}：{{ item.designVal }}</div>
                  <div>最小偏差值：{{ item.negativeVal }}</div>
                  <div>最大偏差值：{{ item.positiveVal }}</div>
                </div>
                <!--<div style="font-size:14px;color:#018FE0;padding-left:10px">测量说明：{{item.explainMeasure || "无"}}</div>-->
                <div style="font-size: 14px; color: #018fe0; padding-left: 10px">
                  <span @click="dialogExplain(item, index)">查看测量说明</span>
                </div>
              </div>
            </div>
            <!-- 公式判定 -->
            <div v-else-if="item.judgmentType.code == '4'">
              <div class="info-item">
                <div class="item-title">
                  <span class="required">检查项：{{ item.checkName }}</span>
                  <div v-if="$isEmpty(item.judgmentType.qualified)" class="status color1 required">未测量</div>
                  <template v-else>
                    <span v-if="!item.judgmentType.qualified && item.judgmentType.status" class="status color1 required"
                      >不合格</span
                    >
                    <span v-if="item.judgmentType.qualified && item.judgmentType.status" class="status color2 required"
                      >合格</span
                    >
                  </template>
                </div>
                <div v-if="!$isEmpty(item.judgmentType.qualified)">
                  <div class="fielditem">
                    <div class="filedTitle v-filedTitle">
                      <span style="color: red; font-weight: normal; vertical-align: middle">*</span>
                      <span>平均碳化深度({{ item.unit }})：</span>
                    </div>
                    <div class="filedValue v-filedValue">
                      <BaseInput
                        placeholder="未填写"
                        v-model="item.judgmentType.pjthsd"
                        :disabled="type == 'view'"
                        @blur="changeFormulaValue(item)"
                      />
                    </div>
                  </div>
                  <div class="fielditem" v-for="(items, k) in item.judgmentType.value" :key="k">
                    <div class="filedTitle">
                      <span style="color: red; font-weight: normal; vertical-align: middle">*</span>
                      <span>测量值({{ item.unit }})：</span>
                    </div>
                    <div class="filedValue">
                      <BaseInput
                        placeholder="未填写"
                        v-for="(itemsChild, i) in items.value"
                        :key="i"
                        v-model="itemsChild.name"
                        :disabled="type == 'view'"
                        @blur="changeFormulaValue(item)"
                      />
                    </div>
                  </div>
                </div>
                <div style="display: flex; justify-content: space-around; margin: 5px 0 15px; color: #ccc">
                  <!--<div>标准值：{{item.standardVal}}</div>-->
                  <div>公式判定值：{{ item.designVal }}</div>
                  <div>最小偏差值：{{ item.negativeVal }}</div>
                  <div>最大偏差值：{{ item.positiveVal }}</div>
                </div>
                <!--<div style="font-size:14px;color:#018FE0;padding-left:10px">测量说明：{{item.explainMeasure || "无"}}</div>-->
                <div style="font-size: 14px; color: #018fe0; padding-left: 10px">
                  <span @click="dialogExplain(item, index)">查看测量说明</span>
                </div>
              </div>
            </div>
            <a-divider v-if="index !== form.checkItems.length - 1" />
          </div>
        </div>
      </a-spin>
    </div>
    <a-modal :footer="null" @cancel="OverlayShow = false" :visible="OverlayShow" :title="explain.title">
      <a-spin :spinning="spinning" class="dialogCtn" :style="'max-height: '+GET_REDRESS_PERCENTAGE * 0.6+'vh; overflow: auto'">
        <div class="description mb20">{{ explain.description || '暂无测量说明' }}</div>
        <div v-for="(imgItem, m) in explain.files" :key="m">
          <img class="mb12" :src="$fileUrl(imgItem)" style="width: 100%" />
        </div>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { actualMeasurementDetail, findByRespAreaNode, findPlanById } from '@/api/system/appManage' // 通用api
import {mapGetters } from 'vuex'
export default {
  name: 'editspotinfo',
  data() {
    return {
      explain: {
        show: false, //测量说明弹框
        title: '测量说明', //测量说明弹框标题
        description: '',
        files: [] //测量说明弹框img
      },
      spinning: false,
      title: this.$route.query.title,
      text1: '',
      text2: '',
      text3: '',
      radio: '',
      columns: [],
      showPicker: false,
      type: '',
      disabled: false,
      id: '',
      form: {},
      qualified: false,
      qualifieds: false,
      mapId: '',
      loading: false,
      areaId: '',
      projectId: this.$route.query.projectId,
      OverlayShow: false,
      loadingSub: false,
      detailDaraParams: {}
    }
  },
  async created() {
    this.mapId = this.$route.query.mapId
    this.type = this.$route.query.type
    this.areaId = this.$route.query.areaId
    this.id = this.$route.query.id
    this.loading = true
    const res = await findByRespAreaNode({
      respAreaNodeId: this.areaId
    }).catch(() => {
      this.loading = false
    })
    if (res.code === 200) {
      res.data.pointTypeNodeVOS.forEach((item) => {
        item.x = item.info.split(',')[0] * 100
        item.y = item.info.split(',')[1] * 100
      })
      this.form = res.data.pointTypeNodeVOS.find((i) => i.id === this.id)
      this.form?.checkItems?.forEach((item) => {
        this.$set(item.judgmentType, 'value', [])
        this.$set(item.judgmentType, 'qualified', true) //默认合格
        this.$set(item.judgmentType, 'status', false) //默认隐藏合格不合格状态
        let code = item.judgmentType.code
        if (code === '0' || code === '1') {
          //标准值判定 /设计标准值判定
          item.judgmentType.value.push({ name: null })
        } else if (code === '2') {
          this.$set(item.judgmentType, 'qualified', null) //默认合格
        } else if (code === '3') {
          //差值判定
          // subtractionValue
          this.$set(item.judgmentType, 'subtractionValue', '') //差值判定去掉最小值并减去最小值后得到的数组 转字符串
          for (var i = 0; i < item.measureNumber; i++) {
            item.judgmentType.value.push({ name: null })
          }
        } else if (code === '4') {
          // 公式判定
          this.$set(item.judgmentType, 'formulaValue', []) //新增公式判定值字段，用户存储值的数组
          this.$set(item.judgmentType, 'pjthsd', '') //新增平均碳化深度字段
          if (item.measureNumber) {
            for (var k = 0; k < 10; k++) {
              item.judgmentType.value.push({ value: [] }) //固定十组数据
              for (var i = 0; i < item.measureNumber; i++) {
                //每组数据item.measureNumber个数据框
                item.judgmentType.value[k].value.push({ name: null })
              }
            }
          }
        } else {
          //其他判定
          for (var i = 0; i < item.measureNumber; i++) {
            item.judgmentType.value.push({ name: null })
          }
        }
      })
      const { mapId, id, needDetail } = this.$route.query
      if (needDetail !== 'unNeed') {
        if (!mapId || !id) return
        this.getDetails(mapId, id)
      }
    } else {
      this.loading = false
    }
  },
  computed: {
    ...mapGetters(['GET_REDRESS_PERCENTAGE'])
  },
  methods: {
    /**
     * 获取详情
     */
    getDetails(mapId, id) {
      actualMeasurementDetail({ mapId, nodeId: id })
        .then((res) => {
          if (res.code === 200) {
            let data = res.data
            const { id, measurementDate, measurementPersonId, reason } = data
            this.detailDaraParams = {
              id: id,
              measurementDate: measurementDate,
              measurementPersonId: measurementPersonId,
              reason: reason
            }
            this.loading = false
            this.form.checkItems.forEach((item, n) => {
              item.checkItemId = data.results[n].checkItemId //更新为详情中得checkItemId
              let code = item.judgmentType.code
              if (code === '0' || code === '1') {
                let valueArr = data.results[n].value.split(';')
                item.judgmentType.status = data.results[n].value ? true : false
                item.judgmentType.qualified = data.results[n].qualified //判断是否合格
                valueArr.map((items, m) => {
                  if (!item.judgmentType.value[m]) {
                    item.judgmentType.value.push({ name: items })
                  } else {
                    item.judgmentType.value[m].name = items
                  }
                })
              } else if (code === '2') {
                // item.judgmentType.qualified = data.results[n].qualified ? '1' : '2';
                if (data.results[n].qualified === null || data.results[n].qualified === '') {
                  item.judgmentType.qualified = null
                } else if (data.results[n].qualified) {
                  item.judgmentType.qualified = '1'
                } else {
                  item.judgmentType.qualified = '2'
                }
              } else if (code === '3') {
                //差值判定
                let valueArr = data.results[n].value.split(';')
                item.judgmentType.value.map((items, m) => {
                  items.name = valueArr[m]
                })
                if (data.results[n].value) {
                  //判断合格不合格
                  item.judgmentType.qualified = data.results[n].qualified
                  item.judgmentType.status = true
                }
              } else if (code === '4') {
                //公式判定
                let qualified = data.results[n].qualified
                item.judgmentType.qualified = qualified //判断是否合格
                if (qualified === null || qualified === '') {
                } else {
                  item.judgmentType.status = true
                }
                let value = data.results[n].value ? JSON.parse(data.results[n].value) : void 0
                if (value) {
                  item.judgmentType.pjthsd = value?.pjthsd
                  item.judgmentType.formulaValue = value?.value
                  item.judgmentType.value.map((item, m) => {
                    item.value.map((items, k) => {
                      let valueArr = value?.value[m].split(';')
                      items.name = valueArr[k]
                    })
                  })
                }
              }
            })
          }
        })
        .catch((e) => {
          console.error(e)
          this.loading = false
        })
    },
    /**
     * Dialog弹出框:展示当前检查项的检测说明
     * item：数组中当前对象
     * index：数据中checkItems数组中的序列
     * id：this.form.pointTypeNodeVO.checkItems[index].id 获取检测说明的参数id
     **/
    dialogExplain(item, index) {
      this.OverlayShow = true
      let id = this.form.pointTypeNodeVO.checkItems[index].id
      this.spinning = true
      findPlanById({ id: id })
        .then((res) => {
          this.spinning = false
          if (res.code === 200) {
            this.explain.description = res.data.explainMeasure // 测量说明
            this.explain.files = res.data.files // 测量说明中的图片待补充
          }
        })
        .catch(() => {
          this.spinning = false
        })
    },
    /***
     * 标准值判定/设计标准值判定
     * 计算：在测量中录入多个测量数据,所有测量数据中只要有一次不合格，则该点位为不合格点位;初始化测量数据只有一个,并且一定要有一个测量数据；
     * 标准判定：standardVal；设计判定/差值判定/公式判定：designVal最大偏差 值：positiveVal ； 最小偏差值：negativeVal
     */
    changeStandardValue(item) {
      const curVal = item.judgmentType.code === '0' ? item.standardVal : item.designVal
      let valueArr = item.judgmentType.value.map((val) => val.name) //获取数组
      item.judgmentType.qualified = true
      for (let i = 0; i < valueArr.length; i++) {
        let y = valueArr[i]
        if (y === '' || y === null) {
          //valueArr[i]不存在
          item.judgmentType.status = false
          item.judgmentType.qualified = false
          break
        } else {
          let x = y - curVal
          if (item.negativeVal < x && x < item.positiveVal) {
            item.judgmentType.status = true
            item.judgmentType.qualified = true
          } else {
            item.judgmentType.status = true
            item.judgmentType.qualified = false
          }
        }
      }
    },
    /***
     * 差值判定
     * 规则：1：测量值中测量数据的最小值，并拿其它值与最小值相减，得到最终测量值，所有测量最终值中只要有一次不合格，则该点位为不合格点位；2：差值判断只有一组测量值，测量个数来源于PC端设置的测量数据个数；
     * 标准判定：standardVal；设计判定/差值判定/公式判定：designVal最大偏差值偏差 ：positiveVal ； 最小偏差值：negativeVal
     */
    changeDifferenceValue(items, item) {
      let valueArr = item.judgmentType.value.map((item) => item.name) //获取数组
      let minValue = valueArr.sort((a, b) => b - a)[valueArr.length - 1] // 获取最小值
      let newValueArr = valueArr.sort((a, b) => b - a).slice(0, valueArr.length - 1) // 去掉最小值并减去最小值后获取的新数组
      let leValueArr = newValueArr.map((x) => x - minValue - item.designVal) // 减去最小值和差值判定值后重定义的新数组
      item.judgmentType.subtractionValue = newValueArr.map((x) => x - minValue).join(';') // 减去最小值后重定义的新数组-差值判定参数
      item.judgmentType.qualified = true
      // 有一个不合格则为不合格
      leValueArr.map((y) => {
        if ((y || y === 0) && item.negativeVal < y && y < item.positiveVal) {
        } else {
          item.judgmentType.qualified = false
        }
      })
      // 判断测量值是否都完整，是否显示合格不合格状态
      valueArr.map((y) => {
        if (y || y === 0) {
          item.judgmentType.status = true
        } else {
          item.judgmentType.status = false
        }
      })
    },
    /***
     * 公式判定
     * 规则：固定十组测量值item.judgmentType.formulaValue;
     * 获取十组值格式为['1;2;3;4;5;6;7;8;9;10;11;12;13;14;15;16'; '……'; ……]
     * 计算：参数（平均碳化深度+固定测量值 ）请求返回是否合格
     * 标准判定：standardVal；设计判定/差值判定/公式判定：designVal最大偏差值：positiveVal ； 最小偏差值：negativeVal
     */
    changeFormulaValue(item) {
      let formulaArr = []
      let formulaStatus = true
      item.judgmentType.formulaValue = []
      item.judgmentType.value.map((x) => {
        let arr = x.value.map((y) => y.name)
        formulaArr.push(arr)
        item.judgmentType.formulaValue.push(arr.join(';'))
      })
      for (var i = 0; i < formulaArr.length; i++) {
        for (var j = 0; j < formulaArr[i].length; j++) {
          if (!formulaArr[i][j]) {
            formulaStatus = false //测量值没有填写则终止遍历
            break
          }
        }
      }
      if (formulaStatus && item.judgmentType.pjthsd) {
        //测量值填写完整后请求
        let actualMeasurementData = {
          checkItemId: item.checkItemId,
          code: item.judgmentType.code,
          formulaCode: item.formulaType?.code,
          pjthsd: item.judgmentType.pjthsd,
          qualified: item.judgmentType.qualified,
          valueNew: item.judgmentType.formulaValue
        }
        project.getQualified(actualMeasurementData).then((res) => {
          if (res.code === 200) {
            let value = res.data.qdtdz - item.designVal
            item.judgmentType.status = true
            if (item.negativeVal < value && value < item.positiveVal) {
              item.judgmentType.qualified = true
            } else {
              item.judgmentType.qualified = false
            }
          }
        })
      } else {
        item.judgmentType.status = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  padding: 0 10px 50px;
  .title {
    font-size: 2rem;
    font-weight: bolder;
    padding: 0.5rem 0;
    text-align: center;
  }
  .info-item {
    margin-bottom: 15px;
  }
  .item-title {
    font-size: 0.9rem;
    padding: 1rem 0;
    .status {
      float: right;
    }
  }
  .color1 {
    color: red;
  }
  .color2 {
    color: #70b603;
  }
  .fielditem:not(::first-line) {
    margin-top: 2rem;
  }
  .fielditem {
    display: flex;
    font-size: 0.8rem;
    /** =========================open **/
    .filedTitle {
      flex: 0.5;
      //   font-size: 1rem;
      color: #999;
      text-align: right;
      vertical-align: middle;
      div {
        text-align: center;
      }
    }
    .filedTitle.v-filedTitle {
      flex: 0.5;
      margin-bottom: 5px;
    }
    .filedValue {
      flex: 1;
      .van-cell.van-field {
        display: inline-block;
      }
      .van-field {
        /*flex:0.2;*/
        width: 40px;
        text-align: center;
        border-radius: 4px;
        background-color: #f2f2f2;
        margin-left: 2px;
      }
    }
    .filedValue.v-filedValue {
      padding-right: 2px;
      .van-field {
        width: 100%;
        text-align: left;
      }
    }
    .filedOperate {
      flex: 0.08;
      .a-button {
        margin: 0;
        font-size: 1.4rem;
        color: #999;
      }
    }
    /** ========================end **/
  }

  /deep/ .filedValue {
    .BaseInput-container {
      margin-bottom: 1rem;
      margin-top: -4px;
    }
  }
}
</style>
